<template>
  <div class="profile">
    <HeaderTop title="我的"></HeaderTop>
    <section class="profile-number">
      <router-link :to="userInfo._id ? '/userInfo' : '/login'" class="profile-link">
        <div class="profile_image">
          <i class="iconfont icon-person"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top" v-if="!userInfo.phone">{{userInfo.name || '登录/注册'}}</p>
          <p>
            <span class="user-icon">
              <i class="iconfont icon-shouji icon-mobile"></i>
            </span>
            <span class="icon-mobile-number">{{userInfo.phone || '暂无绑定手机号'}}</span>
          </p>
        </div>
        <span class="arrow">
          <i class="iconfont icon-jiantou1"></i>
        </span>
      </router-link>
    </section>
    <section class="profile_info_data border-width-1px">
      <ul class="info_data_list">
        <a href="javascript:;" class="info_data_link">
          <span class="info_data_top"><span>0.00</span>元</span>
          <span class="info_data_bottom">我的余额</span>
        </a>
        <a href="javascript:;" class="info_data_link">
          <span class="info_data_top"><span>0</span>个</span>
          <span class="info_data_bottom">我的优惠</span>
        </a>
        <a href="javascript:;" class="info_data_link">
          <span class="info_data_top"><span>0</span>分</span>
          <span class="info_data_bottom">我的积分</span>
        </a>
      </ul>
    </section>
    <section class="profile_my_order border-width-1px">
      <!-- 我的订单 -->
      <a href="javascript:;" class="my_order">
        <span>
          <i class="iconfont icon-order-s"></i>
        </span>
        <div class="my_order_div">
          <span>我的订单</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
      <!-- 积分商城 -->
      <a href="javascript:;" class="my_order">
        <span>
          <i class="iconfont icon-jifen"></i>
        </span>
        <div class="my_order_div">
          <span>积分商城</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
      <!-- 会员卡 -->
      <a href="javascript:;" class="my_order">
        <span>
          <i class="iconfont icon-vip"></i>
        </span>
        <div class="my_order_div">
          <span>我的订单</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-width-1px">
      <!-- 服务中心 -->
      <a href="javascript:;" class="my_order">
        <span>
          <i class="iconfont icon-fuwu"></i>
        </span>
        <div class="my_order_div">
          <span>服务中心</span>
          <span class="my_order_icon">
            <i class="iconfont icon-jiantou1"></i>
          </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-width-1px">
      <mt-button type="danger" style="width: 100%" v-if="userInfo._id" @click="logout">退出登录</mt-button>
    </section>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import {MessageBox, Toast} from 'mint-ui'
  export default {
    name: 'Profile',
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      logout() {
        MessageBox.confirm('确认退出吗？').then(
          action => {
            // 请求退出
            this.$store.dispatch('logout')
            Toast('登出完成')
          },
          action => {
            console.log('点击了取消')
          }
        )
      }
    },
    components:{
      HeaderTop,
    },
  }
</script>

<style lang="less">
  @import '../../common/less/mixins.less';
  .profile {
    width: 100%;
    overflow: hidden;
    .profile-number {
      margin-top: 45.5px;
      .clearFix;
      position: relative;
      display: block;
      background: #02a774;
      padding: 20px 10px;
      .profile_image {
        float: left;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        vertical-align: top;
        .icon-person {
          background: #e4e4e4;
          font-size: 62px;
        }
      }
      .user-info {
        float: left;
        margin-top: 8px;
        margin-left: 15px;
        p {
          font-weight: 700;
          font-size: 18px;
          color: #fff;
          .user-icon {
            display: inline-block;
            margin-left: -15px;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            .icon-mobile {
              font-size: 30px;
              vertical-align: text-top;
            }
          }
          .icon-mobile-number {
            font-size: 14px;
            color: #fff;
          }
        }
        .user-info-top {
          padding-bottom: 8px;
        }
      }
      .arrow {
        position: absolute;
        top: 40%;
        right: 15px;
        width: 12px;
        height: 12px;
        .icon-jiantou1 {
          color: #fff;
          font-size: 5px;
        }
      }
    }
    .profile_info_data {
      .bottom-border-1px(@bc);
      width: 100%;
      background: #fff;
      overflow: hidden;
      .info_data_list {
        .clearFix;
        .info_data_link {
          float: left;
          width: 33%;
          text-align: center;
          border-right: 1px solid #f1f1f1;
          .info_data_top {
            display: block;
            width: 100%;
            font-size: 14px;
            color: #333;
            padding: 15px 5px 10px;
            span {
              display: inline-block;
              font-size: 30px;
              color: #f90;
              font-weight: 700;
              line-height: 30px;
            }
          }
          .info_data_bottom {
            display: inline-block;
            font-size: 14px;
            color: #666;
            font-weight: 400;
            padding-bottom: 10px;
          }
          &:nth-of-type(2) {
            .info_data_top {
              span {
                color: #ff5f3e;
              }
            }
          }
          &:nth-of-type(3) {
            border: 0;
            .info_data_top {
              span {
                color: #6ac20b;
              }
            }
          }
        }
      }
    }
    .profile_my_order {
      .top-border-1px(@bc);
      margin-top: 10px;
      background: #fff;
      .my_order {
        display: flex;
        align-items: center;
        padding-left: 15px;
        >span {
          display: flex;
          align-items: center;
          width: 20px;
          height: 20px;
          .iconfont {
            margin-left: -10px;
            font-size: 30px;
          }
          .icon-order-s {
            color: #02a774;
          }
          .icon-jifen {
            color: #ff5f3e;
          }
          .icon-vip {
            color: #f90;
          }
          .icon-fuwu {
            color: #02a774;
          }
        }
        .my_order_div {
          display: flex;
          justify-content: space-between;
          width: 100%;
          border-bottom: 1px solid #f1f1f1;
          padding: 18px 10px 18px 0;
          font-size: 16px;
          color: #333;
          span {
            display: block;
          }
          .my_order_icon {
            width: 10px;
            height: 10px;
            .icon-jiantou1 {
              color: #bbb;
              font-size: 10px;
            }
          }
        }
      }
    }
  }
</style>
